<template>
  <div class="flex">
    <el-card class="user ml-3 w-3/3" shadow="hover">
      <div style="display: flex;">
        <el-tabs v-model="activeName" class="profile-tabs" style="width: 95%" tab-position="top">
          <el-tab-pane label="菜单管理" name="menu">
            <PortalMenu />
          </el-tab-pane>
          <el-tab-pane label="banner管理" name="banner">
            <PortalBanner />
          </el-tab-pane>
          <el-tab-pane label="服务管理" name="service">
            <PortalService />
          </el-tab-pane>
          <el-tab-pane label="解决方案管理" name="solution">
            <PortalSolution />
          </el-tab-pane>
        </el-tabs>
        <el-button plain type="primary" @click="releasePortal" :loading="loading">
          <Icon class="mr-5px" icon="ep:upload" />
          发布
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import PortalMenu from './components/menu/index.vue'
import PortalBanner from './components/banner/index.vue'
import PortalService from './components/service/index.vue'
import PortalSolution from './components/solution/index.vue'
import * as PortalApi from '@/api/portal'

defineOptions({ name: 'Portal' })

const message = useMessage() // 消息弹窗
const activeName = ref('menu')
const loading = ref(false)
const releasePortal = async () => {
  loading.value = true
  try {
    await PortalApi.release()
    message.success('发布成功！')
  } finally {
    loading.value = false
  }

}
</script>
<style scoped>
.user {
  /* max-height: 960px; */
  padding: 15px 20px 20px;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card .el-card__header, .el-card .el-card__body) {
  padding: 15px !important;
}

.profile-tabs>.el-tabs__content {
  padding: 32px;
  font-weight: 600;
  color: #6b778c;
}

.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
